<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focus type="text" placeholder="请输入内容" />
    <div>
      <h1 v-color="color">好兄弟卖腰子养我</h1>
      <button @click="color = 'red'">换色</button>
    </div>
  </div>
</template>

<script>
export default {
  // 局部自定义指令
  directives: {
    // 这里的指令只能在当前组件中使用
    // 指令名: 配置对象
    focus: {
      inserted(el) {
        el.focus();
      },
    },
    color: {
      // 钩子函数
      // inserted 有两个参数 第一个时 DOM 对象 / 第二个是 指令相关的所有参数
      inserted(el, { value }) {
        // 元素挂载到页面时 自动执行
        // console.log(el, binding);
        // el.style.color = binding.value;
        el.style.color = value;
      },
      // 这个函数 会在指令发生变化时 自动执行
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },

  data() {
    return {
      color: "yellowgreen",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>